<template>
  <view>
    <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
      <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
    </view>
    <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
      <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
        <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
          <view class="uni-indexed-list__item-border" :class="{ 'uni-indexed-list__item-border--last': index === list.items.length - 1 }">
            <view v-if="showSelect" style="margin-right: 20rpx">
              <uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
            </view>
            <text class="uni-indexed-list__item-content">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue';
export default {
  name: 'UniIndexedList',
  components: {
    uniIcons,
  },
  props: {
    loaded: {
      type: Boolean,
      default: false,
    },
    idx: {
      type: Number,
      default: 0,
    },
    list: {
      type: Object,
      default() {
        return {};
      },
    },
    showSelect: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onClick(idx, index) {
      this.$emit('itemClick', {
        idx,
        index,
      });
    },
  },
};
</script>

<style scoped>
.uni-indexed-list__list {
  background-color: #ffffff;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #e5e5e5;
}

.uni-indexed-list__item {
  font-size: 32rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uni-indexed-list__item-container {
  padding-left: 30rpx;
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uni-indexed-list__item-border {
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 30rpx;
  padding-left: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #e5e5e5;
}

.uni-indexed-list__item-border--last {
  border-bottom-width: 0px;
}

.uni-indexed-list__item-content {
  flex: 1;
  font-size: 14px;
}

.uni-indexed-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.uni-indexed-list__title-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  /* #endif */
  background-color: #f7f7f7;
}

.uni-indexed-list__title {
  padding: 6px 12px;
  line-height: 24px;
  font-size: 24rpx;
}
</style>
